<template>
    <div class="options-item">
        <div class="options-item_head l-f l-row-sb">
            <div class="options-item_head_left l-f">
                <img class="options-item_head_left_icon" src="@/assets/images/trend_coin.svg" />
                <p class="options-item_head_left_label">{{options.symbol_name}}</p>
            </div>
            <img v-if="options.status === 3" class="options-item_head_right" src="@/assets/icons/icon-account-options_select.svg" alt="">
            <img v-else class="options-item_head_right" src="@/assets/icons/icon-account-options_no-select.svg" alt="">
        </div>
         <div class="options-item_list l-f l-wrap l-column l-col-start l-col-stretch">
            <div class="options-item_list_item l-f l-row-sb">
                <p class="options-item_list_item_label">{{$t('account.direction')}}</p>
                <p class="options-item_list_item_value" :class="options.type === 1 ? 'color-green' : 'color-red'">{{ options.type === 1 ? $t('account.up') : $t('account.down')}}</p>
            </div>
            <div class="options-item_list_item l-f l-row-sb">
                <p class="options-item_list_item_label">{{$t('account.amount')}}</p>
                <p class="options-item_list_item_value">$ {{options.u}}</p>
            </div>
            <div class="options-item_list_item l-f l-row-sb">
                <p class="options-item_list_item_label">{{$t('account.openPrice')}}</p>
                <p class="options-item_list_item_value">{{numberFormat(options.open_price,4)}}</p>
            </div>
            <div class="options-item_list_item l-f l-row-sb">
                <p class="options-item_list_item_label">{{$t('account.currentPrice')}}</p>
                <p class="options-item_list_item_value">{{numberFormat(options.end_price,4)}}</p>
            </div>
            <div class="options-item_list_item l-f l-row-sb">
                <p class="options-item_list_item_label">{{$t('account.startTime')}}</p>
                <p class="options-item_list_item_value">{{options.c_created_at}}</p>
            </div>
            <div class="options-item_list_item l-f l-row-sb">
                <p class="options-item_list_item_label">{{$t('account.fee')}}</p>
                <p class="options-item_list_item_value">$ {{numberFormat(options.fee,2)}}</p>
            </div>
            <div class="options-item_list_item l-f l-row-sb">
                <p class="options-item_list_item_label">{{$t('account.ror')}}</p>
                <p class="options-item_list_item_value">{{options.profit_ratio}}%</p>
            </div>
            <div class="options-item_list_item l-f l-row-sb">
                <p class="options-item_list_item_label">{{$t('account.expected')}}</p>
                <p class="options-item_list_item_value" v-if="Number(options.fact_profits) > 0">{{options.profit_result > 0 ? '+' : '-'}}$ {{options.fact_profits ? numberFormat(options.fact_profits,4) : 0}}</p>
                <p class="options-item_list_item_value" v-else>$0</p>
            </div>
            <div class="options-item_list_item l-f l-row-sb">
                <p class="options-item_list_item_label">{{$t('account.time')}}</p>
                <p class="options-item_list_item_value">{{options.seconds}} S</p>
            </div>
            <div class="options-item_list_item l-f l-row-sb">
                <p class="options-item_list_item_label">{{$t('account.closedTime')}}</p>
                <p class="options-item_list_item_value">{{options.handled_at}}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { numberFormat } from '@/utils/index.js'
defineProps({
    options: {
        type: Object,
        default: function() {
            return {}
        }
    }
})
</script>

<style lang="scss" scoped>
.options-item {
    background-color: #00000030;
    border-radius: 12px;
    padding: 16px;
    position: relative;
    margin-bottom: 15px;
    &::before {
        content: "";
        display: block;
        background: linear-gradient(118.58deg, #d3b25b 21.42%, #f0d180 67.63%);
        opacity: .7;
        position: absolute;
        left: 0;
        border-radius: 2px;
        height: 24px;
        width: 4px;
    }
    &_head {
        padding-bottom: 15px;
        box-sizing: border-box;
        border-bottom: 1.5px solid rgba(184,184,184,.06);
        &_left {
            &_icon {
                width: 20px;
                height: 20px;
            }
            &_label {
                font-size: 14px;
                color: #ffffff;
                margin-left: 10px;
            }
        }
        &_right {
            width: 22px;
            height: 22px;
        }
    }
    &_list {
        column-gap: 20px;
        max-height: 190px;
        &_item {
            margin: 8px 0;
            &_label {
                color: #ffffff;
                opacity: .3;
            }
            &_value {
                color: #ffffff;
                opacity: .8;
            }
        }
    }
}
@media only screen and (max-width: 1200px) {
    .options-item {
        background-color: #191934;
        &_list {
            max-height: none;
        }
    }
}
</style>